const path=require('path')
// 启动更新的第二步
// const webpack=require('webpack')
// 导入再内存中生成html页面的插件
// 只要是插件，就一定要放到plugin节点中去
// 这个插件的两个作用：
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin=require('html-webpack-plugin')

//JS文件通过Node中的模块操作，向外暴露了一个配置对象
module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
    output:{//输出文件相关的配置
        path:path.join(__dirname,'./dist'), //指定打包好的文件，输出到哪个目录中去
        filename:'bundle.js'  //这是指定输出文件的名称
    },

    // devServer:{//这是配置dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些
    //     open:true,//自动打开浏览器
    //     port:3000,//设置启动时的运行端口
    //     contentBase:'src',//指定托管的根目录
    //     hot:true//启动更新的第一步
    // },
     plugins:[//配置插件的节点
         // new webpack.HotModuleReplacementPlugin()new一个热更新的模块对象，启用热更新的第三步

         new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面，生成内存中的页面
             filename:'index.html'//指定生成页面的名称
        })
     ],
     module:{//这个节点用于配置所有的第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理.scss文件的第三方loader规则
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=378334&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
            // limit给定的值是图片的大小单位是byte，如果引用的图片大于或等于给定的limit值，则不会转为base64的字符串，若小于则会
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} //配置Babel来转换高级的es语法

        ]
    }
}